<template>
  <div>
    <a-form layout="inline" :model="searchForm">
      <a-form-item label="资源名称">
        <a-input v-model="searchForm.resourceName"></a-input>
      </a-form-item>
      <a-form-item label="编码状态">
        <a-select style="width: 150px;" v-model="searchForm.codeStatus">
          <a-select-option v-for="(item, index) in codeStatusOptions" :key="index" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="资源负责人">
        <a-input v-model="searchForm.resourceUser"></a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary">
          <SearchOutlined />搜索
        </a-button>
      </a-form-item>
      <a-form-item>
        <a-button>重置</a-button>
      </a-form-item>
    </a-form>
    <a-button style="margin: 20px 0;" type="primary" @click="openModal">同步编码到装备数据</a-button>
    <MyTable :columns="columns" :tableData="tableData"></MyTable>
    <!-- 赋码弹窗 -->
    <a-modal title="赋码" v-model:open="isShowModal" ok-text="提交" @ok="ok" @cancel="cancel">
      <a-form ref="form" :rules="rules" :label-col="{ span: 6 }" layout="right" :model="formData">
        <a-form-item label="资源名称" name="resourceName">
          <a-input v-model:value="formData.resourceName"></a-input>
        </a-form-item>
        <a-form-item label="资源分类编码" name="resourceTypeCode">
          <a-input v-model:value="formData.resourceTypeCode"></a-input>
        </a-form-item>
        <a-form-item label="资源编码" name="resourceCode">
          <a-row>
            <a-col :span="20">
              <a-input :disabled="!autoCreate" v-model:value="formData.resourceCode"></a-input>
            </a-col>
            <a-col>
              <a-switch checked-children="手动" un-checked-children="自动" v-model:checked="autoCreate" />
            </a-col>
          </a-row>
          <a-row style="margin: 10px 0;">
            <a-col :push="4">
              <a-button :disabled="autoCreate" type="primary">生成编码</a-button>
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <a-row>
        <a-col :push="3">
          <div>说明：此处修改后，同步后将会同步到接口管理功能数据中。</div>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { SearchOutlined } from '@ant-design/icons-vue'
// 搜索表单数据
const searchForm = ref({})
// 编码状态选项
const codeStatusOptions = ref([
  {
    label: '未编码',
    value: '未编码'
  },
  {
    label: "编码中",
    value: '编码中'
  },
  {
    label: "已编码",
    value: '已编码'
  }
])
// 表格列
const columns = [
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    customRender: ({ text, record, index }) => `${index + 1}`,
    align: 'center',
  },
  {
    title: "资源名称",
    dataIndex: 'resourceName',
    key: 'resourceName'
  },
  {
    title: "资源分类代码",
    dataIndex: 'resourceCode',
    key: 'resourceCode'
  },
  {
    title: "资源编码",
    dataIndex: 'resourceCode',
    key: 'resourceCode'
  },
  {
    title: "数据状态",
    dataIndex: 'dataStatus',
    key: 'dataStatus'
  },
  {
    title: "编码状态",
    dataIndex: 'codeStatus',
    key: 'codeStatus'
  },
  {
    title: "资源负责人",
    dataIndex: 'resourceOwner',
    key: 'resourceOwner'
  },
  {
    title: "维护人",
    dataIndex: 'resourceUplpader',
    key: 'resourceUplpader'
  },
  {
    title: "维护日期",
    dataIndex: 'uploadTime',
    key: 'uploadTime'
  },
  {
    title: "操作",
    dataIndex: '操作',
    btnArr: [
      {
        label: '赋码',
        activeIsShow: ({ record }) => {
          return record.codeStatus === '未编码' || record.codeStatus === '编码中'
        },
        onClick: ({ record }) => {
          record.codeStatus = '已编码'
        }
      },
      {
        label: '二维码',
        activeIsShow: ({ record }) => {
          return record.codeStatus === '已编码'
        },
        onClick: () => {
          console.log('二维码')
        }
      },
      {
        label: '删除',
        activeIsShow: true,
        onClick: () => {
          console.log('删除')
        }
      }
    ]
  }

]
// 表格数据
const tableData = ref([
  {
    resourceName: 'xxxxxxxxxxxxxxxxxxx',
    resourceCode: 'xxxx',
    resourceCode: '',
    dataStatus: '1',
    codeStatus: '未编码',
    resourceOwner: '张三',
    resourceUplpader: 'xxxx',
    uploadTime: '2018-09-09 14:00:00'
  }
])
// 赋码弹窗
// 弹窗显隐控制
const isShowModal = ref(false)
// 打开弹窗
const openModal = () => {
  isShowModal.value = true
}
// 弹窗表单数据
const formData = ref({})
// 弹窗表单校验规则
const rules = {
  resourceName: [
    { required: true, message: '请输入资源名称', trigger: 'blur' }
  ],
  resourceTypeCode: [
    { required: true, message: '请输入资源分类编码', trigger: 'blur' }
  ],
  resourceCode: [
    { required: true, message: '请输入资源编码', trigger: 'blur' }
  ]
}
// 是否自动生成资源编码
const autoCreate = ref(false)
const form = ref()
// 提交赋码
const ok = () => {
  form.value.validate().then(() => {
    console.log(formData.value)
    form.value.resetFields()
    isShowModal.value = false
  }).catch(e => {
    console.log(e, '表单错误')
  })
}
// 关闭弹窗
const cancel = () => {
  form.value.resetFields()
  isShowModal.value = false
}
</script>
<style scoped lang="less"></style>
